<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">在线考评</el-menu-item>
      <el-menu-item index="2">考评草稿</el-menu-item>
    </el-menu>

    <div v-if="activeIndex=='1'" style="width: 100%;display: flex;">
      <div class="left">
        <el-tree style="margin-top: 10px"
                 :data="dataTree"
                 ref="treeRef"
                 highlight-current
                 accordion
                 :render-content="renderContent"
                 :props="defaultProps"
                 default-expand-all
                 node-key="id"
                 @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right">
        <div style="display: flex;align-items: center">
          <!--          <el-checkbox v-model="check" label="仅查看有在线设备的门店"></el-checkbox>-->
          <!--          <el-checkbox v-model="check" label="未考评"></el-checkbox>-->
          <el-date-picker
              size="small"
              style="margin-left: 10px;width: 200px"
              v-model="dateSearch"
              type="daterange"
              clearable
              @change="getDate"
              format-value="yyyy-MMMM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <el-select clearable size="small" style="width: 200px;margin-left: 10px" v-model="params.storeType">
            <el-option label="普通店" value="1"></el-option>
            <el-option label="旗舰店" value="2"></el-option>
          </el-select>
          <el-select size="small" style="width: 200px;margin-left: 10px" v-model="select1">
            <el-option label="全部门店状态" value="1"></el-option>
          </el-select>
          <el-input clearable size="small" style="width: 200px;margin-left: 10px" v-model="params.storeName"
                    placeholder="请输入门店名称进行搜索"
                    suffix-icon="el-icon-search"></el-input>
          <el-button style="background-color:#303e9d;
color: #eeeeee;margin-left: 15px" size="small" @click="_search">搜 索
          </el-button>
        </div>
        <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
          <div class="card" v-for="item in storeList">
            <span v-if="item.storeType==1">普通店</span>
            <span v-else style="background-color:#3A93FF;">旗舰店</span>
            <p style="margin:20px 0 10px 20px  ">{{ item.assignName }}</p>
            <p style="color: #919398;font-size: 13px;margin-left: 20px">建店时间：{{ item.createTime }}</p>
            <img src="@/assets/img/store.svg" alt="" style="width: 50px">
            <p class="btn">
              <el-button @click="toAssessment(item.assignTaskId)">开始考评</el-button>
              |
              <el-button @click="detail(item.assignTaskId)">查看详情</el-button>
            </p>
          </div>

        </div>
        <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeMessage"
                       @current-change="handleCurrentMessage" :current-page="currentPage" :page-sizes="[12, 20, 30, 40]"
                       layout="total, sizes, prev, pager, next, jumper" :total="messageTotal">
        </el-pagination>
      </div>
    </div>
    <div v-if="activeIndex=='2'">
      <div class="top" style="display: flex;justify-content: space-between;margin-top: 10px;">
        <div style="font-size: 12px"><i class="el-icon-copy-document" style="margin-right: 5px"></i>批量删除
        </div>
        <div>
          <el-button-group>
            <el-button style="border: 1px solid #eee" size="small">在线考评（0）</el-button>
            <el-button style="border: 1px solid #eee" size="small">线下考评（0）</el-button>
          </el-button-group>
          <el-select size="small" placeholder="请选择门店" style="margin-left: 10px" v-model="select1" l>
            <el-option label="本周" value="1"></el-option>
          </el-select>
          <el-select size="small" placeholder="请选择模板" style="margin-left: 10px" v-model="select1">
            <el-option label="本周" value="1"></el-option>
          </el-select>
        </div>

      </div>
      <div>
        <el-table
            :data="draftData"
        >
          <el-table-column label="门店名称"></el-table-column>
          <el-table-column label="巡查模板"></el-table-column>
          <el-table-column label="上次修改时间"></el-table-column>
          <el-table-column label="操作" width="120px"></el-table-column>

        </el-table>

      </div>
    </div>
    <daily-draw ref="dailyDraw"></daily-draw>
  </div>
</template>

<script>
import dailyDraw from "./componentDialog/dailyDraw.vue";
import dayjs from "dayjs";

export default {
  name: "dailyPatrol",
  components: {
    dailyDraw
  },
  data() {
    return {
      activeIndex: "1",
      select1: "1",
      dateSearch: "1",
      check: true,
      storeList: [],
      currentPage: 1,
      messageTotal: 0,
      pageSize: 12,
      pageNumber: 1,
      areaId: 1,
      params: {},
      draftData: [],
      dataTree: [
        {
          label: "仓库列表",
          icon: "el-icon-basketball",
          children: []
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

    }
  },
  created() {
    this.getList()
    this.$api.assignGetAreaList().then(res => {
      res.map(a => {
        a.label = a.areaName
        a.id = a.areaId
        a.icon = 'el-icon-place'
      })
      this.dataTree[0].children = res
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.treeRef.setCurrentKey(1);
    });
  },
  methods: {
    getList() {
      const params = {
        ...this.params,
        areaId: this.areaId,
        pageSize: this.pageSize,
        pageNumber: this.pageNumber
      }
      this.$api.patrolGetPatrolStoreVo(params).then(res => {
        this.storeList = res.data
        this.messageTotal = res.total
      })
    },
    renderContent(h, {node, data, store}) {
      return h('span', {class: 'custom-tree-node'}, [
        h('i', {class: data.icon, style: {marginRight: '6px'}}),
        h('span', data.label)
      ])
    },
    handleNodeClick(val) {
      this.areaId = val.areaId
      this.getList()
    },
    toAssessment(val) {
      this.$router.push({
        path: '/startAssessment',
        query: {
          assignTaskId: val
        }
      })
    },
    handleSelect(key, keyWord) {
      this.activeIndex = key
    },
    detail(val) {
      this.$refs.dailyDraw.handleOpen(val)
    },
    handleSizeMessage(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentMessage(val) {
      this.pageNumber = val
      this.getList()
    },
    getDate(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.params.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    _search() {
      this.currentPage = 1
      this.pageNumber = 1
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">

.card {
  width: 23%;
  margin-right: 15px;
  height: 150px;
  border: 1px solid #303e9d;
  margin-top: 10px;
  border-radius: 5px;
  position: relative;

  img {
    position: absolute;
    right: 20px;
    top: 40px;
  }

  span {
    display: block;
    width: 40px;
    height: 20px;
    background-color: #13ce66;
    font-size: 12px;
    color: #eeeeee;
    text-align: center;
    position: absolute;
    right: 0;
    border-radius: 2px;

  }

  .btn {
    background-color: #eee;
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;

    .el-button {
      width: 50%;
      background-color: transparent;
      border: none;
    }
  }
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #303e9d;
  color: #303e9d;
}

.el-menu--horizontal > .el-menu-item {
  height: 25px;
  line-height: 10px;
}

.left {
  width: 20%;
  border-right: 1px solid #eee;
  height: calc(100vh - 250px);
  padding: 10px;
  box-sizing: border-box;
}

.right {
  padding: 10px;
  width: 70%;

  span {
    display: block;
  }
}

/deep/.el-button:hover {
  color: #303e9d !important;
}

/deep/ .el-checkbox__input.is-checked
.el-checkbox__inner, .el-checkbox__input.is-indeterminate
.el-checkbox__inner {
  border-color: #303e9d;
  background-color: #303e9d;
}
</style>